<template>
  <div id="app">
    <transition>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" class="view"></router-view>
      </keep-alive>
    </transition>
    <transition>
      <router-view v-if="!$route.meta.keepAlive" class="view"></router-view>
    </transition>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "App",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {
    $route(to, from) {
      console.log('userInfo')
      console.log(this.userInfo)
      if (
        this.userInfo &&
        !this.userInfo.realName &&
        to.name != "userInfo" &&
        to.name != "invite"
      ) {
        this.$tip.show({ type: 1 })
      } else {
        this.$tip.close()
      }
    }
  }
}
</script>
<style lang='scss'>
.v-enter,
.v-leave-to {
  transform: translate3d(100%, 0, 0);
}

.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  transition: all 0.3s;
}
</style>
